<template>
    <view class="globe_back">
        <z-paging ref="paging" v-model="list" @query="queryList">
            <view slot="top">
                <view class="box">
                    <view class="flex tipbox">
                        <view :class="orderType == type.type ? 'tipActive' : 'tip'" @click="changeOrderType(type)" v-for="type in orderTypes" :key="type.id">{{ type.name }}</view>
                    </view>
                    <view class="flex">
                        <view :class="tabIndex == item.id ? 'tabActive' : 'tab'" @click="navtab(item.id)" v-for="item in tab" :key="item.id">{{ item.name }}</view>
                    </view>
                </view>
            </view>
            <view class="box">
                <!-- 列表 -->
                <lz-order-item :type="orderType"></lz-order-item>
            </view>
        </z-paging>
    </view>
</template>

<script>
export default {
    data() {
        return {
            tipIndex: 1,
            tabIndex: 1,
            orderType: 'service',
            orderTypes: {
                1: { name: '商城', id: 1, type: 'goods' },
                2: { name: '租车', id: 2, type: 'lease' },
                3: { name: '服务', id: 3, type: 'service' },
                4: { name: '拖车', id: 4, type: 'rescue' },
                5: { name: '开锁', id: 5, type: 'lock' }
            },

            tab: [
                {
                    name: '全部',
                    id: 1
                },
                {
                    name: '待支付',
                    id: 2
                },
                {
                    name: '待接单',
                    id: 3
                },
                {
                    name: '进行中',
                    id: 4
                },
                {
                    name: '已完成',
                    id: 5
                },
                {
                    name: '售后',
                    id: 6
                }
            ],
            list: [
                {
                    type: '待支付',
                    time: '2023-12-15 12:25',
                    title: '租用电池',
                    address: '贵阳市南明区花果园金融街一号老凤祥贵阳市南明区花',
                    name: '王先生',
                    phone: '156****5412',
                    money: '2001.00'
                }
            ]
        };
    },
    onLoad({ type }) {
        if (type) {
            this.changeOrderType(type);
        }
    },
    methods: {
        changeOrderType(type) {
            const orderTypeItem = this.orderTypes[type];
            if (orderTypeItem) {
                this.orderType = orderTypeItem.type;
            }
        },
        queryList() {},
        tip(e) {
            this.tipIndex = e;
        },
        navtab(e) {
            this.tabIndex = e;
        },
        click(item) {
            console.log('item', item);
        },
        buybtn(id) {
            uni.navigateTo({
                url: '/pages/me/MyOrder/ServiceOrders?type=' + id
            });
        },
        evaluate() {
            uni.navigateTo({
                url: '/pages/me/MyOrder/evaluate'
            });
        },
        AfterSalesDetails() {
            uni.navigateTo({
                url: '/pages/me/MyOrder/AfterSalesDetails'
            });
        },
        inProgress() {
            uni.navigateTo({
                url: '/pages/me/MyOrder/inProgress'
            });
        }
    }
};
</script>

<style scoped lang="scss">
.box {
    padding: 0 32rpx;
}
.tipbox {
    background: #f7f7f7;
    border-radius: 8rpx;
    color: #666b75;
    font-size: 28rpx;
    padding: 8rpx;
}
.tip {
    padding: 16rpx;
    border-radius: 8rpx;
}
.tipActive {
    background: white;
    color: #00091a;
    padding: 16rpx;
    border-radius: 8rpx;
}
.tab {
    color: #999ca3;
    font-size: 28rpx;
    margin: 19rpx;
}
.tabActive {
    color: #3377ff;
    font-size: 32rpx;
    margin: 19rpx;
    font-weight: bold;
}
</style>
